<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>受理反馈</title>
	<script src="../js/header.js"></script>
	<style type="text/css">
		html, body, #app {
			padding: 0px;
			margin: 0px;
			/*height: 100%;*/
		}
		#app{
			border-top: 3px solid #0D9AFF;
			padding: 25px;
			/*background-attachment: fixed;*/
			/*overflow: hidden;*/
		}
		.tab-title{
			font-size: 16px;
			font-weight: bold;
			border-left: 4px solid #0D9AFF;
			font-family: PingFangSC-Medium;
			padding-left:10px;
			margin-bottom: 20px;
		}
		.el-dialog__footer {
			padding: 10px 20px 20px;
			text-align: center;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		.el-dialog__body {
			color: rgb(96, 98, 102);
			font-size: 14px;
			word-break: break-all;
			padding: 0px 20px;
		}
		#excel {
			display: none;
		}
		.el-input__inner {
			-webkit-appearance: none;
			background-color: #FFF;
			background-image: none;
			border-radius: 4px;
			border: 1px solid #DCDFE6;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			color: #606266;
			display: inline-block;
			font-size: inherit;
			height: 30px;
			line-height: 30px;
			outline: 0;
			padding: 0 15px;
			-webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
			transition: border-color .2s cubic-bezier(.645,.045,.355,1);
		}
		/*#app .el-input,
		#app .el-select,
		#app .el-input-number{
			width: 100%;
		}*/
		.listed .el-form-item__label{
			letter-spacing: 3px;
		}
		.el-select ,.el-date-editor.el-input, .el-date-editor.el-input__inner {
			width: 100%;
		}
		/*.el-textarea {
			width: 95%;
		}*/

		/* 搜索按钮样式修改 */
		#app .el-button.is-circle.search_btn{
			position: absolute;
			right: 0;
			top: 0;
			border: 0;
			background: none;
		}
		#app .el-button.is-circle.search_btn i{
			font-size: 17px;
		}
		.pagination {
			text-align: center;
			margin-top: 30px;
		}
	</style>
</head>

<body>
<div v-cloak id="app">
	<div style="margin-top: 10px;border-bottom:1px solid rgba(200,200,200,0.43);">
		<el-form :model="selectForm" ref="selectForm" label-width="150px">
			<el-row>
				<el-col :span="7">
					<el-form-item label="违法活动记录:" prop="records" label-width="110px">
						<el-input v-model="selectForm.records" placeholder="" style=""></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="投诉人:" prop="name" label-width="110px">
						<el-input v-model="selectForm.name" placeholder="" style=""></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="状态:" prop="appealStatus" label-width="110px">
						<el-select v-model="selectForm.appealStatus" placeholder="请选择" style="">
							<el-option label="未提交" value="0"></el-option>
							<el-option label="待处理" value="1"></el-option>
							<el-option label="已处理" value="2"></el-option>							
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col span="10">
					 <el-form-item label="投诉时间:" label-width="110px">							
						 <el-row>
							 <el-col span="6" style="width: 180px;">
								 <el-form-item prop="time1">
									 <el-date-picker type="date" placeholder="选择日期" v-model="selectForm.time1"
													value-format="yyyy-MM-dd" style="width: 180px;" @change="changeval()">
									 </el-date-picker>
								 </el-form-item>
							 </el-col>
							 <el-col span="1" style="color: rgb(192, 204, 218);text-align: center;">
								 <span>至</span>
							 </el-col>
							 <el-col span="5">
								 <el-form-item prop="time2">
									 <el-date-picker type="date" placeholder="选择日期" v-model="selectForm.time2"
													value-format="yyyy-MM-dd" style="width: 180px; " @change="changeval()">
									 </el-date-picker>
								 </el-form-item>
							 </el-col>
						 </el-row>
					</el-form-item>
				</el-col>
				<div style="float: right;">
					<el-button type="primary" size="small" style="width: 60px;height: 30px;" @click="searchForm('selectForm')">查询</el-button>
					<el-button type="warning" size="small" style="width: 60px;height: 30px;" @click="resetForm('selectForm')">重置</el-button>
				</div>
			</el-row>
		</el-form>
	</div>
	
	<el-table :data="tableData" border style="width: 100%;margin-top: 35px;" ref="multipleTable"
      @selection-change="handleSelectionChange" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
		<el-table-column type="selection"></el-table-column>
		<el-table-column
            type="index"
            label="序号"
            width="60" align="center">
    	</el-table-column>
		<el-table-column
				prop="name"
				label="投诉人"
				width="250"
				align="center" >
		</el-table-column>
		<el-table-column
				prop="creatTime"
				label="投诉时间"
				width="250"
				align="center">
		</el-table-column>
		<el-table-column
				prop="appealStatus"
				label="状态"
				width="110"
				align="center">
			<template slot-scope="scope">
				<span v-if="scope.row.appealStatus==0" style="color:#F19437;">未提交</span>
				<span v-if="scope.row.appealStatus==1" style="color:#20A0FF;">待处理</span>
				<span v-if="scope.row.appealStatus==2" style="color:#67C23A;">已处理</span>
			</template>
		</el-table-column>
		<el-table-column
				prop="records"
				label="违法活动记录"
				width="350"
				align="center">
		</el-table-column>
		<el-table-column
				prop="commentCode"
				label="是否有附件"
				width="120"
				align="center">
		</el-table-column>	
		<el-table-column
				label="操作"
				width=""
				align="center">
			<template slot-scope="scope">
				<el-button type="" size="mini" @click="view(scope.$index,scope.row)">查看详情</el-button>
				<el-button v-if="scope.row.appealStatus=='1'" type="primary" size="mini" @click="feedback(scope.$index,scope.row)">反馈</el-button>
			</template>
		</el-table-column>
	</el-table>
	
	<div style="overflow: hidden;">
		<div class="pagination">
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 20, 30, 40]"
					:page-size="pagesize"
					background
					layout="total, sizes,prev, pager, next"
					:total="tableTotal"
					prev-text="上一页"
					next-text="下一页">
			</el-pagination>
			<el-button type="primary" size="mini" @click="batchExport()" style="margin-left:20px;float: right;">导出</el-button>
			<el-button type="primary" size="mini" @click="appovalEx()" style="margin-left: 20px;float: right;">批量导出</el-button>

		</div>	
	</div>
	<!--查看详情-->
	<el-dialog title="" :visible.sync="viewdialogForm" center fullscreen>
		<el-form :model="Detail" :rules="rules" ref="Detail" label-width="140px">
			<el-row>
				<el-col :span="4" class="tab-title">
					受理信息
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="投诉人:"  prop="name" label-width="110px">
						<el-input v-model="Detail.name"  placeholder=""  disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="9">
					<el-form-item label="性别:" prop="sex" label-width="190px">
						<el-radio-group v-model="Detail.sex">
						    <el-radio label="男" disabled>男</el-radio>
						    <el-radio label="女" disabled>女</el-radio>
						 </el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="联系电话:"  prop="phone" label-width="110px">
						<el-input v-model="Detail.phone"  placeholder="" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="14">
					<el-form-item label="通讯地址:" required label-width="190px">
	                    <el-col :span="5">
							<el-form-item prop="provinceValue">
	                            <el-select v-model="Detail.province" placeholder="请选择省" @change="chooseProvince" style="" disabled>
	                                <el-option
							    		v-for="item in provinceData"
							    		:key="item.code"
							    		:label="item.name"
							    		:value="item.name">
									</el-option>
								</el-select>
	                        </el-form-item>
	                    </el-col>
	                    <el-col span="0.5" style="color: rgb(192, 204, 218);text-align: center;">
							<span style="color: #C0CCDA;;">—</span>
	                    </el-col>
	                    <el-col :span="5">
							<el-form-item prop="cities">
	                            <el-select v-model="Detail.cities" placeholder="请选择市" @change="chooseCity" style="" disabled>
	                                <el-option
							    		v-for="item in cityData"
							    		:key="item.code"
							    		:label="item.name"
							    		:value="item.name">
									</el-option>
								</el-select>
	                        </el-form-item>
	                    </el-col>
	                    <el-col span="0.5" style="color: rgb(192, 204, 218);text-align: center;">
							<span style="color: #C0CCDA;;">—</span>
	                    </el-col>
	                    <el-col :span="5">
							<el-form-item prop="county">
								<el-select v-model="Detail.county" placeholder="请选择区、县" @change="chooseArea" style="" disabled>
							    	<el-option
								        v-for="item in areaData"
								        :key="item.code"
								        :label="item.name"
								        :value="item.name">
								    </el-option>
							    </el-select>
	                        </el-form-item>
	                    </el-col>
						<el-col span="0.5" style="color: rgb(192, 204, 218);text-align: center;">
	                        <span>—</span>
	                    </el-col>
						<el-col :span="7">
						    <el-form-item prop="random">
						    	<el-input v-model="Detail.random" placeholder="填写详细地址" disabled></el-input>
						    </el-form-item>
					   	</el-col>			
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>						
				<el-col :span="8">
					<el-form-item label="投诉时间:"  prop="creatTime" label-width="110px">
						<el-date-picker
								disabled
								v-model="Detail.creatTime"
								type="date"
								value-format="yyyy-MM-dd"
								placeholder=""
								>
						</el-date-picker>
					</el-form-item>
				</el-col>					
			</el-row>
			<el-row>
				<el-col :span="22">
					<el-form-item label="违法活动记录:" prop="records" label-width="110px" :required="reRemarkRequired">
						<el-input
								disabled
								type="textarea"
								:autosize="{ minRows: 8, maxRows: 8}"
								placeholder=""
								maxlength="500"
								show-word-limit
								v-model="Detail.records">
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>						
				<el-col :span="22">
					<el-form-item label="附件:" prop="" label-width="110px">						
						<iframe width="100%"  style="height: 200px;border: none;"   :src="link"></iframe>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="22">
					<div style="float:right;">
						<el-button type="info" size="small" style="width: 60px;height: 30px;" @click="viewdialogForm = false;">关闭</el-button>
					</div>
				</el-col>
			</el-row>
		</el-form>
	</el-dialog>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                uuid:'',
                link:'',//iframe链接
                link2:'',//iframe链接
                currentPage: 1, //默认显示页面为1
                pagesize: 10, // 每页的数据条数
                tableTotal:'',
                tableData: [],
                multipleTable: [],     //存放选中值的数组
                Detail : {
                    id:"",
                    name: "",
                    sex: "",
                    phone:"",
                    province: "",
                    cities:"",
                    county:"",
                    random:"",
                    creatTime: "",
                    appealContent: "",
                    records:""
                    
                },
                provinceData: [],
                cityData: [],
                areaData: [],
                viewdialogForm: false,
                rules: {
                    name: [{
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur'
                    }],
                    sex: [{
                        required: true,
                        message: '请选择性别',
                        trigger: 'change'
                    }],
                    phone: [{
                        required: true,
                        message: '请输入联系电话',
                        trigger: 'blur'
                    }],                   
//                  province: [{
//                      required: true,
//                      message: '请输选择省',
//                      trigger: 'change'
//                  }],
//                  cities: [{
//                      required: true,
//                      message: '请选择市',
//                      trigger: 'change'
//                  }],
//                  county: [{
//                      required: true,
//                      message: '请选择区、县',
//                      trigger: 'change'
//                  }],
//                  random: [{
//                      required: true,
//                      message: '请填写详细地址',
//                      trigger: 'blur'
//                  }],                                   
                    records: [{
                        required: true,
                        message: '请输入违法活动记录',
                        trigger: 'blur'
                    },{
                        max : 500,
                        message : '请输入长度最大为500个字符',
                        trigger : 'blur'
                    }],
                    creatTime: [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }]                                      
                },
                selectForm: {
                    records: '',
                    name: '',
                    time1: '',
                    time2: '',
                    appealStatus: '',

                }

            }
        },
        created(){
            var userInfo = JSON.parse(localStorage.getItem('userInfo'));
            var userRole = userInfo.orgName;
            if(userRole.includes("建设单位")){
                this.hasApprovalBtn = false;
            }
            axios.get('../json/ChinaCity.json').then(res=>{
                this.provinceData = res.data;
            }).catch(e => {
                this.$message.error("网络连接超时");
            })
        },
        mounted(){
            this.getData();
        },
        methods: {
            getData() {
                var pagesize = this.pagesize;
                var pageno = this.currentPage;
                debugger
                axios({
                    method: 'get',
                    url: '/dzjwgr/appeal/getPage',
                    params: {
                        pageSize: pagesize,
                        pageNo: pageno,
                        records: this.selectForm.records,
                        name: this.selectForm.name,
                        startTime: this.selectForm.time1,
                        endTime: this.selectForm.time2,
                        appealStatus: this.selectForm.appealStatus
                    }
                })
				.then(response => {
					console.log(response)
					if (response.data.code == 200) {
						this.tableData = response.data.data.results;
						this.tableTotal = response.data.data.total;// 数据长度

					} else {
						this.$message.error(data.msg);
					}
				})
				.catch(function (error) {
					console.log(error);
				});
            },
            changeval(){
                if(this.selectForm.time2 != ''){
                    if(this.selectForm.time1 > this.selectForm.time2){
                        this.$message.error("投诉开始时间必须小于投诉结束日期");
                        return;
                    }
                }
                if(this.selectForm.time1 != ''&& this.selectForm.time2 != '' ){
                    if(this.selectForm.time1 > this.selectForm.time2){
                        this.$message.error("投诉开始时间必须小于投诉结束日期");
                        return;
                    }
                }

            },
            // 反馈
            feedback(index, row){
                axios({
                    method : 'get',
                    url : '/dzjwgr/appeal/fk',
                    params : {
                        id : row.id
                    }
                })
                    .then(response => {
                        if(response.data.code == 200) {
                            console.log(response.data);
                            this.$message({
                                type: 'success',
                                message: '反馈成功!'
                            });
                            this.getData();
                        }else{
                            debugger;
                            console.log(response.data);
                            this.$message.error(response.data.msg);
				}
                    })
                    .catch(function(error){
                       console.log(error);
                    });
            },
            //获取UUID的方法
            getUuid() {
                axios({
                    method: 'get',
                    url: '/dzjwgr/uuid/getUuid',
                })
                    .then(response => {
                        console.log(response);
                        if (response.data.code == 200) {
                            this.uuid = response.data.data;
                            this.link="upload/annex.html?uuid="+this.uuid+"&flag=1";
                            this.link2="upload/annex.html?uuid="+this.uuid+"yyzz"+"&flag=1";
                            console.log(this.uuid);
                        } else {
                            this.$message.error(response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            // 表单提交
            onSubmit() {
                this.constructionUnitEntity.id=this.uuid;
                axios({
                    method: 'post',
                    url: 'enterPrise/addEnterPrise',
                    data: this.constructionUnitEntity
                })
                .then((response) => {
                    let data = response.data;
                    if (data.code == 200) {
                        this.dialogForm = false;
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                        this.getData();
                    } else {
                        this.$message.error(data.msg);
                    }
                });
            },
            // 表单修改
            onReplace(){
                axios({
                    method: 'post',
                    url: '/dzjap/constr/update',
                    data: this.constructionUnitEntity
                })
                .then((response) => {
                    let data = response.data;
                    if (data.code == 200) {
                        this.dialogForm = false;
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        this.getData();
                    } else {
                        this.$message.error(data.msg);
                    }
                });
            },
            clearForm(){
                this.showMoveOutList = false;
                this.showMoveInList = false;
                
                /*this.$nextTick(()=>{
                	this.$refs['constructionUnitEntity'].resetField();
                })*/
            },
            
            handleChange(value) {
                console.log(value);
            },
            handleSelectionChange(val) {
            	console.log(val);
    			this.multipleTable = val;               //  this.multipleTable 选中的值
		      	
		    },
            //批量导出
            appovalEx(){
                this.$confirm('确定要批量导出吗?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    window.location.href="/dzjwgr/appeal/export?records="+this.selectForm.records+"&name="
                    +this.selectForm.name+"&startTime="
                    +this.selectForm.time1+"&endTime="
                    +this.selectForm.time2+"&appealStatus="
                    +this.selectForm.appealStatus;
            }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '取消导出'
                });
            });
            },
			//导出选中行数据
		    batchExport(){
		    	var ids='';
		    	for(let i=0;i<this.multipleTable.length;i++){
	    	    	ids += this.multipleTable[i].id;
		    	    if(i < this.multipleTable.length-1){
		    	    	ids += ',';
		    	    }
		    	}
		    	console.log(ids);
                if(ids ==""){
                    this.$message({
                        type: 'warning',
                        message: '未选中导出数据，请勾选之后再进行导出!'
                    });
                    return ;
				}else{
                    window.location.href="/dzjwgr/appeal/exportByIds?ids="+ids;
				}
		    },
            apply(){
                this.dialogForm = true;
                this.showOnSubmit = true;
                this.showOnReplace = false;

                this.clearForm();
                this.getUuid();
                this.formDisabled = false;
            },
            /* 单选搜索表单 */
            selectCurrentChange(val){
                this.currentRow = val;
            },
            /* 列表页搜索 */
            searchForm(selectForm) {

                axios({
                    method: 'get',
                    url: '/dzjwgr/appeal/getPage',
                    params: {
                        pageSize: this.pagesize,
                        pageNo: 1,
                        records: this.selectForm.records.trim(),
                        name: this.selectForm.name,
                        startTime: this.selectForm.time1,
                        endTime: this.selectForm.time2,
                        appealStatus: this.selectForm.appealStatus
                    }
                })
                .then(response => {
                    if (response.data.code == 200) {
                        let dataInformation = response.data.data.results;
                        this.tableTotal = response.data.data.total;// 数据长度

                        this.tableData = dataInformation;
                    } else {
                        this.$message.error(data.msg);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            //重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
                debugger;
                this.getData();
            },
            //每页下拉显示数据
            handleSizeChange(size) {
                this.pagesize = size;
                this.getData();
                /*console.log(this.pagesize) */
            },
            //点击第几页
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage;
                this.getData();
            },
            // 设置允许填写和不允许填写
            checkDisabled(n){
                if(n){
                    this.formDisabled = true;
                }else{
                    this.formDisabled = false;
                }
            },
            // 删除
            del(index,row){
                this.$confirm('确定要删除吗?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: 'post',
                        url: '/dzjap/constr/delConstr/'+row.id,
                    })
                        .then(response => {
                            let data = response.data;
                            console.log(response)
                            if (data.code == 200) {
                                // 确认删除
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                this.getData();
                            } else {
                                this.$message.error(data.msg);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    });
                });
            },
            // 查看企业信用详情
            view(index,row){  
            	this.uuid=row.id;
                this.link="upload/annex.html?uuid="+this.uuid+"&flag=0";
                this.viewdialogForm = true;
                this.Detail = row;
            },
            
            // 修改
            edit(index,row){
                this.uuid=row.id;
                this.link="upload/annex.html?uuid="+this.uuid+"&flag=1";
                this.link2="upload/annex.html?uuid="+this.uuid+"yyzz"+"&flag=1";
                this.dialogForm = true;
                this.showOnReplace = true;
                this.showOnSubmit = false;
                this.showOnJoinList = false;

                this.showInformation(index,row);
                
                this.checkDisabled(false);
            },
            // 公共方法--查看
            showInformation(index,row){
                axios({
                    method: 'post',
                    url: '/dzjap/constr/findbyid/'+row.id,
                })
				.then(response => {
					let data = response.data;
					if (data.code == 200) {
						let rowdata = data.constructionUnitEntity;
						// this.clearForm(); // 重置
                        var arr = rowdata.location.split("-");
                        this.provinceValue = arr[0];
                        this.cityValue = arr[1];
                        this.areaValue = arr[2];
						this.constructionUnitEntity = rowdata;
						axios.get('../../json/ChinaCity.json').then(res=>{
		                	this.provinceData = res.data;
		                    this.provinceData.map(e=>{//遍历数据
			                    if( this.provinceValue == e.name){
				                    this.cityData = e.cityList;
				                    this.cityData.map(e=>{//遍历数据
					                    if( this.cityValue == e.name){
						                    this.areaData = e.areaList;
						                    return;
						                }
						            })
				                    return;
				                }
				            })
						}).catch(e => {
							this.$message.error("网络连接超时");
						})
					} else {
						this.$message.error(data.msg);
					}
				})
				.catch(function (error) {
					console.log(error);
				});
           	},
            chooseProvince(value){
                this.cityValue = '';
                this.areaValue = '';
                this.cityData = [];
                this.areaData = [];
                this.provinceData.map(e=>{//遍历数据
                    if( value == e.name){
                        this.cityData = e.cityList;
                        return;
                    }
                })
                console.log(value)
                this.constructionUnitEntity.location = value;
            },
            chooseCity(value){
                this.areaValue = '';
                this.cityData.map(e=>{//遍历数据
                    if( value == e.name){
                        this.areaData = e.areaList;
                        return;
                    }
                })
                this.constructionUnitEntity.location=this.constructionUnitEntity.location +"-" +value;
                console.log(this.constructionUnitEntity.location)
            },
            chooseArea(value){
                this.constructionUnitEntity.location=this.constructionUnitEntity.location +"-" +value;
            }
        }
    })
</script>
</body>
</html>